<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="../css/buycart.css"/>
		<script src="/libs/requirejs/require.js" data-main="/js/buycart"></script>
		<title>购物车-米卡米卡</title>
	</head>
	<body>
		<header></header>
		
		<div class="maxwIn">
			<div id="main">
			  <!-- 购物车开始 -->
			  	<div class="cart-title">
				    <h1>
				      <img src="../images/baycart.png" width="24px" height="24px"/>购物车
				    </h1>
				</div>
				<div class="cart-empty" >
					  <img src="../images/buylan.png" />
					  <q class="empty-tip">
					  	<b>您的购物车里还没有商品</b>，您可以：<br>将
					  	<a href="allcake.html">收藏夹</a>
					  	中的商品添加进来，或者去看看 <a href="/html/allcake.html">商城 »</a>
					  </q>
				</div>
				<div class="cartprod" >
					<div class="cart-nav">
						<div class="nav-one">
							<span>购物车</span>
						</div>
						<div class="nav-two">
							<i>&nbsp;</i>
							<span>填写和提交订单信息</span>
						</div>
						<div class="nav-two">
							<i>&nbsp;</i>
							<span>成功提交订单</span>
						</div>
					</div>
					<div class="cartList">
						<table  cellpadding="0" cellspacing="0" class="cart-main">
							<thead>
						      	<tr>
						        	<th colspan="2" width="549px">商品</th>
						        	<th width="100px">销售价</th>
						        	<th width="100px">数量</th>
						        	<th width="100px">优惠金额</th>
						        	<th width="100px">积分</th>
						        	<th width="100px">小计</th>
						        	<th width="100px">操作</th>
						     	</tr>
						    </thead>
							<tbody class="cart-item" style="width: 100%;">
							   
							</tbody>
  								
							<tfoot>
						      <tr >
						        <td colspan="4">
								  <div id="unused_promotion" class="unused-promotion">
								      <h3>
								      	<a href="javascript:void(0);" class="btn-collapse action-toggle">-</a>
								      	您还未享受到的优惠      
								      	<em>凑单»</em>
								      </h3>
								    
								  </div>
								</td>
								<!-- 订单价格 -->
								<td colspan="4" class="order-price" id="order_price">
								  <ul>
								    <li class="goods">
								      <span class="label"><em>商品总金额：</em></span>
								      <span class="price total-price"><b></b></span>
								    </li>
								    <li class="discount">
								      <span class="label"><em>订单优惠金额：</em></span>
								      <span style="margin-left: -100px;"><b>0.00</b></span>
								    </li>
								    <li class="total">
								      <span class="label">
								      	<i>(订单可得积分<span class="subtotal-integral total-price"></span>)
								      	</i> 
								      	<em>总金额：</em>
								      </span>
								      <span class="price total-price"><b></b></span>
								    </li>
								  </ul>
								</td>
						      </tr>
						      <tr height="60px">
						        <!-- 按钮 -->
						        <td colspan="4" class="cart-left">
						          <button type="button" class="btn btn-flat action-clean">
						          	<span><span>清空购物车</span></span>
						          </button>
						          <button type="button" class="btn btn-caution action-fororder">
						          	<span><span>凑单商品</span></span>
						          </button>        
						        </td>
						        <td colspan="4" class="cart-right">
						          <a href="/index.html" class="btn-link">继续购物</a>
						          <button type="submit" class="btn btn-import btn-huge action-settle" rel="_request">
						          	<span>
						          		<span>下单结算
						          			<i class="f-icon">►</i>
						          		</span>
						          	</span>
						          	
						          </button>        
						        </td>
						      </tr>
						    </tfoot>
						</table>
						
					</div>
				</div>
				<div id="order_container" class="order-container" style="display: none;">
      				<div class="title">
      					<h2>填写和提交订单信息</h2>
      				</div>
    					<!-- checkout内容 -->
    				<form action="" method="post">
           				<input type="hidden" name="purchase[addr_id]" value="">
           				<input type="hidden" name="purchase[def_area]" value="">
      					<input type="hidden" name="md5_cart_info" value="4fb49133d9d2c49048222ea878e2f0d3">
      					<input type="hidden" name="extends_args" id="op_extends_args" value="{" get":"array","post":"array"}"="">

				        <!-- 订单信息填写 -->
				      	<div id="order_main" class="order-main">
				        <!-- 收货信息 -->
							<div id="order_shipping" class="order-section order-shipping" data-validatemsg="请完整填写收货信息并确认收货信息">
	  							<div class="order-section-title">
	  								<b>收货信息</b>
	  								<a href="javascript:void(0);" class="action-edit-shipping fold">[修改]</a>
	  							</div>
		  						<div class="order-section-content">
								    <!-- 完整收货信息 -->
								    <table class="view-shipping fold">
									      <tbody>
											    <tr>
											      <th>收货地区：</th>
											      <td><input type="hidden" name="def_addr_id" value=""></td>
											    </tr>
											    <tr>
											      <th>收货地址：</th>
											      <td></td>
											    </tr>
											        <tr>
											      <th>收货人姓名：</th>
											      <td></td>
											    </tr>
											        <tr>
											      <th>送货时间：</th>
											      <td>，</td>
											    </tr>
										    </tbody>
								    </table>
								    <!-- 常用收货地址列表 -->
								    
								    <table class="fill-shipping">
								    	<tbody>
										    <tr>
										        <th><em>*</em>收货地区：</th>
										      	<td>
										      		<span class="region" vtype="area" id="dom_el_d7ae4b0">
														<input name="area" package="mainland" type="hidden" value="mainland:北京天津以外配送:3310">
														<select data-level-index="0" class="x-select">
															<option value="_NULL_">请选择</option>
															<option value="1" data-level-index="0">北京配送</option>
															<option value="3434" data-level-index="1">天津市</option>
															<option value="3310" data-level-index="2">北京天津以外配送</option>
														</select>
														<select data-level-index="1" class="x-select" style="">
															<option value="_NULL_">请选择</option>
															<option value="3366" data-level-index="24">北京市</option>
															<option value="22" data-level-index="25">上海市</option>
															<option value="63" data-level-index="26">重庆市</option>
															<option value="104" data-level-index="27">安徽</option>
															<option value="227" data-level-index="28">福建</option>
															<option value="322" data-level-index="29">甘肃</option>
															<option value="423" data-level-index="30">广东</option>
															<option value="566" data-level-index="31">广西</option>
															<option value="690" data-level-index="32">贵州</option>
															<option value="788" data-level-index="33">海南</option>
															<option value="814" data-level-index="34">河北</option>
															<option value="998" data-level-index="35">河南</option>
															<option value="1176" data-level-index="36">黑龙江</option>
															<option value="1320" data-level-index="37">湖北</option>
															<option value="1436" data-level-index="38">湖南</option>
															<option value="1573" data-level-index="39">吉林</option>
															<option value="1643" data-level-index="40">江苏</option>
															<option value="1763" data-level-index="41">江西</option>
															<option value="1874" data-level-index="42">辽宁</option>
															<option value="1989" data-level-index="43">内蒙古</option>
															<option value="2103" data-level-index="44">宁夏</option>
															<option value="2130" data-level-index="45">青海</option>
															<option value="2182" data-level-index="46">山东</option>
															<option value="2340" data-level-index="47">山西</option>
															<option value="2471" data-level-index="48">陕西</option>
															<option value="2589" data-level-index="49">四川</option>
															<option value="2792" data-level-index="50">西藏</option>
															<option value="2873" data-level-index="51">新疆</option>
															<option value="2987" data-level-index="52">云南</option>
															<option value="3133" data-level-index="53">浙江</option>
															<option value="3235" data-level-index="54">香港</option>
															<option value="3239" data-level-index="55">澳门</option>
															<option value="3242" data-level-index="56">台湾</option>
														</select>
														<select data-level-index="2" class="x-select" style="display:none;"></select>
													</span>
												</td>
		    								</tr>
									    	<tr>
									      		<th><em>*</em>收货地址：</th>
									      		<td>
									      			<span id="op_splice_area">请选择请选择</span> 
									      			<input class="x-input" type="text" name="addr" vtype="required" size="40" data-caution="请填写收货地址" id="dom_el_d7ae4b1">
									      		</td>
									    	</tr>
										    <tr>
										      	<th>邮编：</th>
										      	<td>
										      		<input class="x-input" type="text" name="zip" id="dom_el_d7ae4b2">
										      	</td>
										    </tr>
										    <tr>
										      	<th><em>*</em>收货人姓名：</th>
										      	<td><input class="x-input" type="text" name="name" id="dom_el_d7ae4b3" vtype="required" data-caution="请填写收货人姓名"></td>
										    </tr>
										    <tr>
										      	<th><em>*</em>联系方式：</th>
										      	<td>
										        	手机<input class="x-input" type="text" name="mobile" id="dom_el_d7ae4b4" vtype="mobile" data-caution="请填写手机号码或者固定电话"> 
												        或
												        固定电话<input class="x-input" type="text" name="tel" id="dom_el_d7ae4b5" vtype="tel">        
												    <span class="caution notice-inline">手机号码和固定电话至少填写一个</span>
										      	</td>
										    </tr>
			        						<tr>
											      <th></th>
											      <td>
											      	<input type="checkbox" checked="checked" name="" id="" class="action-assign-times"/> 指定送货时间 
											      	<span class="assign-times">
											        <!--todo-->
												        <select name="day" id="" class="action-select-special">
												          	<option selected="selected" value="任意日期">任意日期</option>
												          	<option value="仅工作日">仅工作日</option>
												          	<option value="仅休息日">仅休息日</option>
												           	<option value="special">指定日期</option>        
												        </select>
												        <span class="special-delivery-day" style="display:none;">
												          	<input class="x-input calendar" type="text" name="special" readonly="readonly" size="27" data-calendar-options="{'type':'datetable','hasNight':true,'shortest':'5'}" id="dom_el_d7ae4b6">          
												          	<span class="red">请选择您指定的配送时间</span>
												        </span>
												        <select name="time" id="" class="action-select-times">
													          <option value="任意时间段">任意时间段</option>
													          <option value="上午">上午</option>
													          <option value="下午">下午</option>
													          <option value="晚上">晚上</option>
												        </select>
											      	</span>
											      </td>
											</tr>
									        <tr>
										      	<th></th>
										      	<td>
										      		<button type="button" class="btn btn-caution action-confirm-shipping">
										      			<span><span>确认收货信息</span></span>
										      		</button>
										      	</td>
										    </tr>
									    </tbody>
									</table>
								</div>
							</div>
							<!-- 配送方式模块 -->
							<div id="order_delivery" class="order-section order-delivery" >
							  	<div class="order-section-title">
							  		<b>配送方式</b>
							  	</div>
							  	<div class="order-section-content express1" style="display:block;">
							    	<div class="notice">请先确定收货信息，之后再选择配送方式</div>
							    	
								    <table class="view-delivery  fold ">
								        <tbody>
										    <tr>
										      	<th>配送方式：</th>
										      	<td></td>
										    </tr>
										    <tr>
										      	<th>运费：</th>
										      	<td>￥0.00</td>
										    </tr>
									    </tbody>
									</table>
    								<table class="change-delivery ">
							      <!--预售商品选择时支付方式变化判断-->
							        </table>
  								</div>
								<div class="order-section-content express2" style="display: none;">
								    <table class="change-delivery ">  
								    	<thead>
										    <tr>
										      <td>配送方式</td>
										      <td>运费</td>
										      <td>说明</td>
										    </tr>
										</thead>
										<tbody>
										    <tr class="separator">
										    	<td></td>
										    </tr>
										    <tr id="delivery_4" class="master">
										        <td>
										        	<input type="radio" name="shipping" value="" id="for_delivery_4" class="action-change-delivery">
										        	<label for="for_delivery_4">中通速递</label>
										        </td>
										      	<td><b>￥0.00</b></td>
										      	<td>&nbsp;</td>
										    </tr>
										
									        <tr id="delivery_5" class="master">
										        <td>
										        	<input type="radio" name="shipping" value="" id="for_delivery_5" class="action-change-delivery">
										        	<label for="for_delivery_5">顺丰速递</label>
										        </td>
									      		<td><b>￥22.00</b></td>
									      		<td>&nbsp;</td>
										    </tr>
										
									        <tr id="delivery_7" class="master">
									        	<td>
									        		<input type="radio" name="shipping" id="for_delivery_7" class="action-change-delivery">									        		<label for="for_delivery_7">【十年巧克力】顺丰冷链</label></td>
									      		<td><b>￥50.00</b></td>
									      		<td></td>
									    	</tr>
								
								      	</tbody>
								  		<tfoot>
										    <tr>
										      <td colspan="3">
										      	<button type="button" class="btn btn-caution action-confirm-delivery">
										      		<span><span>确定配送方式</span></span>
										      	</button>
										      </td>
										    </tr>
								  		</tfoot>
									</table>
								</div>
							
							</div>
							<!-- 支付方式模块 -->
							<div id="order_payment" class="order-section order-payment" data-validatemsg="请选择一种支付方式并确认支付方式" data-linkagemsg="因为配送方式变更，请重新确认支付方式">
								<div class="order-section-title">
									<b>支付方式</b>
								</div>
								<div class="order-section-content">
									<div class="notice paymoney1" style="display: block;">请先确定配送方式，之后再选择支付方式</div>
									<table class="view-payment fold">
										<tbody>
											<tr>
												<th>支付方式：</th>
												<td>
													
												</td>
											</tr>
										</tbody>
									</table>
									<div class="change-payment" style="display: none;">
										<input type="hidden" name="payment[currency]" value="CNY">
										<table>
										    <tbody>
										        <tr class="selected">
										      		<th>
										        		<input type="radio" id="pay_app_id_deposit" class="action-change-payment" >
										        		<label for="pay_app_id_deposit">预存款</label>
										      		</th>
										      		<td></td>
										    	</tr>
										        <tr class="last ">
										      		<th>
										        		<input type="radio" id="pay_app_id_alipay" class="action-change-payment">
										        		<label for="pay_app_id_alipay">支付宝</label>
										      		</th>
										      		<td></td>
										    	</tr>
										    
										  	</tbody>
										  	<tfoot>
										    	<tr>
										      		<th colspan="2">
										      			<button type="button" class="btn btn-caution action-confirm-payment">
										      				<span><span>确认支付方式</span></span>
										      			</button>
										      		</th>
										    	</tr>
										  	</tfoot>
										</table>
									</div>
								</div>
							</div>
							<div id="order_invoice" class="order-section order-invoice">
								<div class="order-section-title">
									<b>发票信息</b>
								</div>
								<div class="order-section-content">
									<table>
										<tbody>
											<tr>
												<td>
													<ul>
														<li>
															<input type="radio" name="payment[tax_type]" id="for_invoice_false" value="false" class="action-select-invoice" checked="checked"> 
															<label for="for_invoice_false">不需要发票</label>
														</li>
														<li>
															<input type="radio" name="payment[tax_type]" id="for_invoice_personal" value="personal" class="action-select-invoice"> 
															<label for="for_invoice_personal">个人发票 </label>
														</li>
														<li>
															<input type="radio" name="payment[tax_type]" id="for_invoice_company" value="company" class="action-select-invoice"> 
															<label for="for_invoice_company">公司发票 </label>
														</li>
													</ul>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<!-- 商品清单 -->
							<table id="cart_main" class="cart-main" width="100%">
								<caption>商品清单</caption>
								<colgroup>
									<col class="col-2">
									<col class="col-3">
									<col class="col-4">
									<col class="col-5">
									<col class="col-6">
									<col class="col-7">
								</colgroup>
								<thead>
									<tr>
										<th>商品</th>
										<th>销售价</th>
										<th>数量</th>
										<th>优惠金额</th>
										<th>积分</th>
										<th>小计</th>
							     
							    	</tr>
							  	</thead>
								 <!-- 购物车条目 -->
								<tbody class="cart-item1">
									<!-- 主商品 -->
									<!---->
									<!-- 配件 -->
								</tbody>
							</table>
      					</div>

						     <!-- 结算信息 -->
						<table id="order_clearing" class="order-clearing">
							<caption>结算信息</caption>
							<tbody>
								<tr>
									<td class="order-infor">
										<!-- 判断是不是预售商品-->
										<!-- 使用优惠券 -->
										<div id="order_coupon" class="order-coupon">
											<h3>
						    					<a href="javascript:void(0);" class="btn-expand action-toggle">+</a>使用优惠券
						  					</h3>
											
										</div>
										<div id="order_remark" class="order-remark">
											<label for="">订单备注：</label>
											<textarea name="memo" class="action-remark-textarea" cols="60" rows="3" placeholder="请在此填写您对该订单或商品的特殊要求或说明，最多300字。"></textarea>
										</div>
									</td>
						
									<!-- 订单价格 -->
									<td id="order_price" class="order-price">
										<div class="inner">
											<ul>
												<li class="goods">
													<span class="label"><em>商品总金额：</em></span>
													<span class="price">
														<b>￥</b>
														<b class="total-price"></b>
													</span>
												</li>
												<li class="">
													<span class="label"><em>运费：</em></span>
													<span class="price">￥0.00</span>
												</li>
						
												<li class="total">
													<span class="label">
										                <i>(订单可得积分
										                <i class="total-price"></i>
										                )</i>
										                <em>总金额：</em>
													</span>
													<span class="price ">
														<b>￥</b>
														<b class="total-price"></b>
													</span>
												</li>
											</ul>
											<span class="message">未包含运费</span>
											<p class="btnarea">
												<a href="" class="btn-link">返回购物车 »</a>
												<!--普通商品-->
												<button type="submit" rel="_request" class="btn btn-import btn-big action-submit-order">
													<span><span>提交订单</span></span>
												</button>
												<!--判断是否是预售商品和预售商品的时间判断 判断是否是预售商品尾款时间判断
						<button type="submit" rel="_request" class="btn btn-import btn-big action-submit-order"><span><span>提交订单</span></span></button>-->
											</p>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
    				</form>
  				</div>
			</div>
		</div>
		
		<footer></footer>
		<!--购物车渲染模板-->
		<script type="text/html" id="cart-template">
			{{each cart prod}}
			 <tr class="cart-product last" height="105px" style="border-bottom: 1px solid #E6E6E6;" data-id={{prod.id}}>
			      	<td>
			        	<div class="p-pic">
			          		<img src="{{prod.image}}" alt="情书">
			      		</div>
			      	</td>
			      	<td class="p-info" style="width: 420px;">
				        <div class="p-title">
				        	<a target="_blank" href="#">{{prod.title}}</a>
				        </div>
			        	<div class="p-spec">规格：礼盒</div>
			        
			      	</td>
			      	<td class="p-price">{{prod.price}}</td>
			     	<td>
				        <div class="p-quantity">
				          	<a href="javascript:void(0);" class="btn-decrease">-</a>
				         	<input type="text" name="" class="prod-amount" value="{{prod.amount}}" >
				          	<a href="javascript:void(0);" class="btn-increase">+</a>
				        </div>
			      	</td>
			      	<td class="p-discount">0.00</td>
			      	<td class="p-integral">
			          	{{(prod.price*prod.amount).toFixed(2)}}    
			      	</td>
			      <td class="p-subtotal suball">{{(prod.price*prod.amount).toFixed(2)}}</td>
			      <td class="p-action">
	                <a href="javascript:void(0);" class="btn-fav" rel="_addfav_" data-gid="297">收藏</a>
	                <i>|</i>
			        <a href="javascript:void(0);" class="btn-delete">移除</a>
			      </td>
			    </tr>
			    
			{{/each}}
			
		</script>
		
		<!--订单渲染模板-->
		<script type="text/html" id="cart-template2">
			{{each cart prod}}
			
				<tr class="cart-product last" data-id={{prod.id}}>
					<td class="p-info">
						<div class="p-title">
							<a target="_blank" href="">{{prod.title}}</a>
						</div>
					</td>
					<td class="p-price">{{prod.price}}</td>
	//				<!--判断是不是预售商品-->
					<td>{{prod.amount}}</td>
	//				<!--判断是不是预售商品-->
					<td class="p-discount">0.00</td>
					<td class="p-integral">{{(prod.price*prod.amount).toFixed(2)}}</td>
					<td class="p-subtotal">{{(prod.price*prod.amount).toFixed(2)}}</td>
				</tr>
//			<!-- 赠品 -->
//			<!--判断是不是预售商品-->
//			<!-- 商品促销 -->
			
			{{/each}}
		</script>
		
			
		<!--点击事件-->
		<script>
		
			let affirm=document.querySelector(".action-settle"),
				cartlist=document.querySelector(".cartprod"),
				returnlink=document.querySelector(".btn-link"),
				//确认收货信息
				action=document.querySelector(".action-confirm-shipping"),
				_express1=document.querySelector(".express1"),
				_express2=document.querySelector(".express2"),	
				
				//确认支付方式
				action2=document.querySelector(".action-confirm-delivery"),
				payfor1=document.querySelector(".paymoney1")
				payfor2=document.querySelector(".change-payment")
				
				order=document.querySelector(".order-container");
				//跳转到订单页面
				affirm.onclick=function(){
					cartlist.style.display="none"
					order.style.display="block"
				}
				//返回购物车
			returnlink.onclick=function(){
				cartlist.style.display="block"
				order.style.display="none"
			}
			//确认配送方式
			action.onclick=function(){
				_express1.style.display="none"
				_express2.style.display="block"
				
			}
			//确认支付方式
			action2.onclick=function(){
				payfor1.style.display="none"
				payfor2.style.display="block"
			}
			
		</script>
	</body>
	
	
	
	
</html>
